<script name="referenceDetail" setup>
import {onMounted, reactive, ref} from 'vue'
import {ElMessageBox, ElMessage} from 'element-plus'
import api from '@/api/index'
import {useRoute} from "vue-router";
import {formatListToTree} from "@/util";

const route = useRoute();
const formInline = reactive({})
const pageData = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0
})
const formData = ref({})
const TypeOptions = ref([])
const subBizTypeList = ref([])
const tableData = ref([])

const columns = [
  {alias: 'bizTypeName', label: '业务类型'},
  {alias: 'subBizTypeName', label: '业务子类'},
  {alias: 'formCode', label: '表单编码'},
  {alias: 'formName', label: '表单名称'},
]

onMounted(() => {
  formInline.id = route.query.id
  getAllType()
  requestSubBusinessTypeList()
  onSearch()
})

const getAllType = () => {
  const params = {pageNum: 1, pageSize: 5000}
  api.reimbursement.getBizTypeList(params).then((res) => {
    TypeOptions.value = res.list || []
  })
}

// 请求业务子类列表
const requestSubBusinessTypeList = (bizTypeName) => {
  subBizTypeList.value = []
  if (!bizTypeName) {
    return
  }
  api.reimbursement.getSubTypeListByBizName(bizTypeName).then(data => {
    subBizTypeList.value = formatListToTree(data)
  })
}

const onSearch = () => {
  const params = {...formInline, ...pageData}
  api.flowTemplate.getReference(params).then((res) => {
    tableData.value = res.list || []
    pageData.total = res.total || 0
  })
}
const onReset = () => {
  delete formInline.bizTypeName
  onSearch()
}

const bizTypeChange = () => {
  formInline.bizTypeName = TypeOptions.value.find(el => el.typeCode === formInline.bizTypeCode).typeName
}

const onAction = ([item, row]) => {
  const obj = {
    'pageNum': onSearch,
    'pageSize': onSearch
  }
  if (typeof item === 'string') {
    pageData[item] = row
    if (item === 'pageSize') pageData.pageNum = 1
    obj[item]()
  } else {
    obj[item.alias](row)
  }
}

</script>

<template>
  <section>
    <page-view>
      <template #form>
        <SearchForm :data-form="formInline" @onReset="onReset" @on-search="onSearch">
          <el-form-item prop="bizTypeCode">
            <el-select v-model="formInline.bizTypeCode" clearable filterable placeholder="请选择业务类型"
                       @change="bizTypeChange">
              <el-option v-for="item in TypeOptions" :key="item.typeCode" :label="item.typeName"
                         :value="item.typeCode"/>
            </el-select>
          </el-form-item>
          <el-form-item prop="subBizTypeCode">
            <subBizSelect ref="subBizSelectRef" v-model="formInline.subBizTypeCode"
                          :bizTypeName="formInline.bizTypeName"
                          :checkStrictly="true" :emitPath="false" :multiple="false"/>
          </el-form-item>
          <el-form-item prop="formName">
            <el-input v-model.trim="formInline.formName" clearable placeholder="请输入表单名称"/>
          </el-form-item>
          <el-form-item prop="formCode">
            <el-input v-model.trim="formInline.formCode" clearable placeholder="请输入表单编码"/>
          </el-form-item>
        </SearchForm>
      </template>
      <template #table="tableScope">
        <PubilcTable :isSlot="false" :list-config="columns" :page-data="pageData"
                     :table-data="tableData" :tableHeight="tableScope.tableHeight" @on-action="onAction"/>
      </template>
    </page-view>
  </section>
</template>

<style lang="scss" scoped>

</style>
